<template>
  <section class="padding">
    <el-card
      v-for="(notice, index) in noticeList"
      :key="index"
      class="margin-bottom"
    >
      <div slot="header" class="clearfix relative">
        <span class="title-icon">通知邮箱</span>

        <el-tooltip
          class="item"
          effect="dark"
          content="新增"
          placement="top-start"
        >
          <el-button
            v-if="index === 0"
            type="text"
            class="header-btn"
            icon="el-icon-plus"
            @click="onAdd(index)"
          />
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          content="删除"
          placement="top-start"
        >
          <el-button
            v-if="index !== 0"
            type="text"
            class="header-btn"
            icon="el-icon-delete"
            @click="onDel(index)"
          />
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          content="保存"
          placement="top-start"
        >
          <el-button
            type="text"
            class="header-btn"
            icon="el-icon-check"
            @click="onSave(index)"
          />
        </el-tooltip>
      </div>
      <el-form :inline="true" :model="notice" class="demo-form-inline">
        <el-form-item label="邮箱">
          <el-input v-model="notice.email" type="" placeholder="通知邮箱" />
        </el-form-item>
        <el-form-item label="是否启用">
          <el-switch v-model="notice.isActive" />
        </el-form-item>
        <el-form-item label="是否通知预计时间">
          <el-switch v-model="notice.isNotice" />
        </el-form-item>
        <div>
          <el-form-item label="">
            <el-checkbox-group v-model="notice.checkedStatus">
              <el-checkbox
                v-for="(label, value) in publicData.waybillStatusMap"
                :key="value"
                :label="value"
              >
                {{ $t('waybill.' + label) }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>
      </el-form>
    </el-card>
  </section>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  customerTrackNoticeEmailSave,
  customerTrackNoticeEmailList,
  customerTrackNoticeEmailDelete
} from '@/api/myProfile'

export default {
  name: 'TrackingNotificationSettings',
  data() {
    return {
      noticeList: [
        {
          email: '',
          isActive: true,
          isNotice: false,
          checkedStatus: [],
          id: ''
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['publicData'])
  },
  mounted() {
    this.queryList()
  },
  methods: {
    async queryList() {
      const dataResult = await customerTrackNoticeEmailList({ type: 1 })
      // console.log("dataResult",dataResult.datas);
      const newData = []
      if (dataResult.datas) {
        dataResult.datas.forEach(data => {
          const item = {
            email: data.email,
            isActive: data.enabled === 1,
            isNotice: data.sendEstimatedTime === 1,
            checkedStatus: data.sendStatus.split(','),
            id: data.id
          }
          newData.push(item)
        })
      }
      if (newData.length > 0) {
        this.noticeList = newData
      }
      this.$store.dispatch('app/toggleDialog', false)
      // console.log("noticeList",newData);
    },
    onAdd(i) {
      this.noticeList.push({
        email: '',
        isActive: true,
        isNotice: false,
        checkedStatus: [],
        id: ''
      })
    },
    async onDel(i) {
      // console.log("paramdata",this.noticeList[i].id);
      if (this.noticeList[i].id !== '') {
        this.$store.dispatch('app/toggleDialog', true)
        const data = await customerTrackNoticeEmailDelete(this.noticeList[i].id)
        if (data.code === 200) {
          this.$message.success('删除成功')
          this.queryList()
        } else {
          this.$message.error(data.message)
          this.$store.dispatch('app/toggleDialog', false)
        }
      }

      this.noticeList.splice(i, 1)
    },
    async onSave(i) {
      this.$store.dispatch('app/toggleDialog', true)
      const reg = new RegExp(
        '^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$'
      ) // 邮箱正则表达式
      const paramdata = this.noticeList[i]

      if (!reg.test(paramdata.email)) {
        this.$message.error('请填写正确的邮箱')
        return
      }

      let sendStatus = ''
      paramdata.checkedStatus.forEach(data => {
        sendStatus += data + ','
      })
      // console.log("paramdata",paramdata);
      const param = {
        email: paramdata.email,
        enabled: 0,
        type: 1,
        sendEstimatedTime: 0,
        sendStatus: sendStatus.substring(0, sendStatus.length - 1),
        id: paramdata.id
      }
      if (paramdata.isActive) {
        param.enabled = 1
      }
      if (paramdata.isNotice) {
        param.sendEstimatedTime = 1
      }
      // console.log("param",param);
      const data = await customerTrackNoticeEmailSave(param)
      if (data.code === 200) {
        this.$message.success('保存成功')
        this.queryList()
      } else {
        this.$message.error(this.$t('customer.' + data.message))
      }
      this.$store.dispatch('app/toggleDialog', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.header-btn {
  padding: 0;
  margin-left: 30px;
}
</style>
